<template>
  <div class="chat-container">
    <div class="chat-header">
      <button @click="toggleCodeMode" class="code-mode-btn">代码模式</button>
      <div class="header-buttons">
        <button @click="handleLike" class="like-btn">
          <i class="fas fa-thumbs-up"></i>
        </button>
        <button @click="handleDislike" class="dislike-btn">
          <i class="fas fa-thumbs-down"></i>
        </button>
        <button @click="handleCopy" class="copy-btn">
          <i class="fas fa-copy"></i>
        </button>
        <button @click="handleShare" class="share-btn">
          <i class="fas fa-share-alt"></i>
        </button>
      </div>
    </div>
    <div class="chat-messages">
      <div
        v-for="(message, index) in messages"
        :key="index"
        :class="[
          'message',
          message.user === 'user' ? 'user-message' : 'ai-message',
        ]"
      >
        {{ message.text }}
      </div>
    </div>
    <div class="chat-input">
      <input
        v-model="inputText"
        @keyup.enter="sendMessage"
        placeholder="输入你的问题..."
      />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";

const inputText = ref("");
const messages = ref([{ user: "ai", text: "欢迎！请输入你的问题。" }]);

const toggleCodeMode = () => {
  // Toggle code mode logic
};

const handleLike = () => {
  // Handle like logic
};

const handleDislike = () => {
  // Handle dislike logic
};

const handleCopy = () => {
  // Handle copy logic
};

const handleShare = () => {
  // Handle share logic
};

const sendMessage = async () => {
  if (inputText.value.trim() === "") return;

  messages.value.push({ user: "user", text: inputText.value });

  try {
    const response = await axios.post("/api/ai-response", {
      text: inputText.value,
    });
    messages.value.push({ user: "ai", text: response.data.response });
  } catch (error) {
    console.error("Error fetching AI response:", error);
  }

  inputText.value = "";
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.code-mode-btn {
  background-color: #6c757d;
  color: white;
  border-radius: 50%;
  padding: 0.5rem;
  cursor: pointer;
}

.header-buttons button {
  margin-left: 1rem;
  cursor: pointer;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background-color: #fff;
}

.message {
  margin: 0.5rem 0;
  padding: 0.5rem;
  border-radius: 5px;
}

.user-message {
  background-color: #f0f4f8;
  float: left;
}

.ai-message {
  background-color: #e0e4ea;
  float: right;
}

.chat-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
}

.chat-input input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ced4da;
  border-radius: 5px;
}

.chat-input button {
  margin-left: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
</style>